<template>
  <el-dialog
    title="配置常用功能"
    :visible.sync="dialog.isShow"
    width="900px"
    top="70px"
    :close-on-click-modal="false"
    @close="closeEvent"
  >
    <el-form :inline="true">
      <el-form-item
        label="一级功能菜单列表"
      >
        <el-select
          v-model="levelOneId"
          @change="levelOneChange"
        >
          <el-option
            v-for="(item,index) in levelOneList"
            :key="index"
            :value="item.lngmenuid"
            :label="item.strmenuname"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary">查询</el-button>
      </el-form-item>
    </el-form>
    <div class="tree-wp">
      <el-scrollbar wrap-class="scrollbar-wrapper">
        <div v-for="item in levelTwoList" :key="item.lngmenuid" class="tree-list">
          <p class="p1">{{ item.strmenuname }}</p>
          <el-tree
            :data="item.subList"
            show-checkbox
            node-key="lngmenuid"
            :check-strictly="true"
            :props="defaultProps"
            :default-checked-keys="checkedArr"
            @check-change="levelTwoChange"
          />
        </div>
      </el-scrollbar>
    </div>
    <div class="choose">
      <el-row>
        <el-col :span="4">
          已选择 ( {{ list.length }}/10 ) ：
        </el-col>
        <draggable
          :list="list"
          v-bind="$attrs"
          class="board-column-content"
          :set-data="setData"
        >
          <div v-for="element in list" :key="element.lngmenuid" class="board-item">
            {{ element.strmenuname }}
            <i class="el-icon-close" @click="deleteChoose(element.lngmenuid)" />
          </div>
        </draggable>
      </el-row>
    </div>
    <div slot="footer">
      <el-button type="primary" @click="save">确 定</el-button>
      <el-button @click="dialog.isShow = false">取 消</el-button>
    </div>
  </el-dialog>
</template>
<script>
import { listOnelevelMenu, getAllMenuByOne, saveCommonMenu } from '@/api/common/common'
import draggable from 'vuedraggable'
function nestTree(data) {
  data.subList.forEach(val => {
    if (val.subList.length) {
      val.disabled = true
      nestTree(val)
    }
  })
}
export default {
  name: 'CommonFunctionDialog',
  components: {
    draggable
  },
  data() {
    return {
      dialog: {
        isShow: false
      },
      levelOneId: 0,
      levelOneList: [], // 一级菜单 select
      levelTwoList: [], // 二级菜单 tree
      checkedArr: [], // 选中的key数组
      list: [], // 选中的菜单
      data: [],
      defaultProps: {
        children: 'subList',
        label: 'strmenuname'
      }

    }
  },
  created() {
    this.listOnelevelMenu(315)
  },
  methods: {
    show() {
      this.dialog.isShow = true
    },
    hide() {
      this.dialog.isShow = false
    },
    setData(dataTransfer) {
      // to avoid Firefox bug
      // Detail see : https://github.com/RubaXa/Sortable/issues/1012
      dataTransfer.setData('Text', '')
    },
    // 点击小叉号删除选中的菜单
    deleteChoose(lngmenuid) {
      this.list.some((val, i) => {
        if (val.lngmenuid === lngmenuid) {
          this.list.splice(i, 1)
        }
      })
      this.checkedArr = this.list.map(val => { return val.lngmenuid })
      this.levelOneChange(this.levelOneId)
    },
    // 保存选中的菜单
    save() {
      const tmp = this.list.map((val, i) => {
        return { lngmenuid: val.lngmenuid, intsort: i, strbackground: '' }
      })
      saveCommonMenu(tmp).then(res => {
        if (res.code === 20000) {
          this.$message.success(res.message)
          this.hide()
        }
      })
    },
    // 一级菜单select
    listOnelevelMenu(productId) {
      listOnelevelMenu(productId).then(res => {
        this.levelOneList = res.data
        this.$nextTick(() => {
          this.levelOneChange(res.data[0].lngmenuid)
        })
      })
    },
    // 二级菜单tree
    getAllMenuByOne(lngsysmenuid) {
      getAllMenuByOne({
        lngproducitd: 315,
        lngsysmenuid: lngsysmenuid
      }).then(res => {
        nestTree(res.data[0])
        this.levelTwoList = res.data[0].subList
      })
    },
    // 一级菜单change
    levelOneChange(val) {
      this.levelOneId = val
      this.getAllMenuByOne(val)
    },
    // tree 选中改变
    levelTwoChange(node, checked) {
      if (checked) {
        if (this.list.length === 10) {
          this.levelOneChange(this.levelOneId)
          this.$message.error('最多选择10个常用功能！')
          return false
        }
        this.list.push(node)
      } else {
        this.list.some((val, i) => {
          if (val.lngmenuid === node.lngmenuid) {
            this.list.splice(i, 1)
          }
        })
      }
      this.checkedArr = this.list.map(val => {
        return val.lngmenuid
      })
    },
    // 从父级传递
    setChoose(list) {
      this.list = list
      this.checkedArr = this.list.map(val => {
        return val.lngmenuid
      })
    },
    closeEvent() {
      this.$emit('refreshCommonMenu')
    }
  }
}
</script>
<style lang="scss">
.tree-wp .scrollbar-wrapper {
  overflow-x: hidden !important;
}
</style>
<style scoped>
.tree-wp{
    /* width: 100%; */
    overflow-x: auto;
    overflow-y: hidden;
    height: calc(100vh - 380px);
}
.tree-wp .el-scrollbar {
  height: 100%;
  width:2000px;
}

.tree-list {
    width:270px;
    float: left;
    margin-right: 20px;
    border: 1px solid #DCDFE6;
}
.tree-list .p1{
    line-height: 40px;
    background: #00A99D;
    color: #fff;
    text-align: center;
}
.choose{
    margin-top: 10px;
}
.board-item{
    display: inline-block;
    padding: 0px 5px;
    border: 1px dashed #DFE2E8;
    margin: 5px;
    cursor: pointer;
}
.board-item:hover{
    border: 1px dashed #00A99D;
    color: #00A99D;
}
</style>
